<template>
  <!-- 价格区间 -->
  <div class="price-area">
    <p class="tags-w97">价格区间: </p>
    <div class="price-ipt-wrapper">
      <input class="price-ipt-lf" type="number" v-model.trim='priceObj.startPrice' @input="isEmpty">
      <div class="price-middle">
        至
      </div>
      <input class="price-ipt-rf" type="number" v-model.trim='priceObj.endPrice' @input="isEmpty">
      <div class="ipt-tooltip" v-show="isShowTooltip">
        <EmptyTooltip :msg="msg"></EmptyTooltip>
      </div>
    </div>
    <!--筛选价格 -->
    <div class="filter-price" :class="isControlBg === 1 ? 'active' :''" @click="filterPrice()">筛选价格</div>
    <div class="clear-price"  :class="isControlBg === 2 ? 'active' :''" @click="clearPrice()">清空价格</div>
  </div>
</template>

<script>
import EmptyTooltip from '../EmptyTooltip'
export default {
  components:{EmptyTooltip},
  data () {
    return {
      //控制筛选价格和清空价格的状态,0为默认的不选中
      isControlBg:0,
      priceObj:{
        //起始价格
        startPrice:'',
        //结束价格
        endPrice:'',
      },
      //控制显示tooltip弹框
      isShowTooltip:false,
      //定时器
      timer:null,
      msg:"请输入价格"
    }
  },
  methods: {
    //筛选价格
    filterPrice(){
      if(this.isControlBg === 1){
        // 不选中
        this.isControlBg = 0;
        this.isShowTooltip = false;
        this.clearTime();
      }else{
        this.isControlBg = 1;
        if(!this.priceObj.startPrice || !this.priceObj.endPrice){
          this.commonClearInterval("请输入价格哦~")
        }else{
          // 发送开始价格和结束价格
          if(this.priceObj.startPrice  > this.priceObj.endPrice){
            this.commonClearInterval("起始价格要小于结束价格哦~")
          }else{
            this.isShowTooltip = false;
            this.clearTime();
            this.$emit("sendPrice",this.priceObj);
          }
        }
      }
    },
    //清空价格
    clearPrice(){
      if(this.isControlBg === 2){
        // 不选中
        this.isControlBg = 0;
      }else{
        this.isControlBg = 2;
        if(this.isControlBg === 2){
          // 清空价格
          this.priceObj.startPrice = "";
          this.priceObj.endPrice = "";
          this.isShowTooltip = false;
          this.clearTime()
        }
      }
    },
    isEmpty() {
      this.isShowTooltip = false;
      this.clearTime();
    },
    //清除定时器
    clearTime() {
      clearInterval(this.timer);
      this.timer = null;
    },
    //公共的清除定时器方法
    commonClearInterval(msg) {
      this.msg = msg;
      // 先清除定时器
      if(this.timer){
        this.clearTime();
      }
      this.isShowTooltip = true;
      if(this.isShowTooltip){
        this.timer = setInterval(()=>{this.isShowTooltip = false},3000)
      }else{
        this.clearTime();
      }
    }
  },
  computed: {
  },
  watch:{
  },
  mounted() {

  },
  beforeDestory() {
    this.clearTime();
  }
}
</script>

<style scoped>
  /* 价格区间 */
  .price-area{
    display:flex;
    align-items:center;
    height: 34px;
    line-height: 34px;
  }
  .tags-w97{
    width: 97px;
    line-height: 34px;
    white-space: nowrap;
  }
  .price-ipt-wrapper{
    display:flex;
    background-color: #21232e;
    height: 34px;
    align-items: center;
    position:relative;
  }
  .price-ipt-wrapper .ipt-tooltip{
    position: absolute;
    top:43px;
    left:78px;
  }
  .price-ipt-lf,
  .price-ipt-rf{
    flex-basis:86px;
    border-radius:4px;
    height: 34px;
    color:#ffffff;
    background-color: #21232e;
    border:2px solid #404040;
    box-sizing:border-box;
    text-indent:8px;
  }
  .price-ipt-lf:focus,
  .price-ipt-rf:focus{
    border:2px solid #0096e6;
  }
  .price-middle{
    flex-basis:42px;
    height: 34px;
    text-align: center;
    color:#ffffff;
  }
  .filter-price,
  .clear-price{
    width:120px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius:4px;
    margin-right:24px;
    cursor: pointer;
    user-select: none;
    transition: all .1s ease;
  }
  .filter-price:hover,
  .clear-price:hover{
    color:#ffffff;
    font-weight:500;
    background-image: linear-gradient(to left,#009aff,#00ccff);
  }
  .price-area .active{
    color:#ffffff;
    font-weight:500;
    background-image: linear-gradient(to left,#009aff,#00ccff);
  }
</style>
